import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import { interfaceConfig } from '@/config/interfaceConfig';
import _ from 'lodash';
import { imgLazy } from '@/utils/tools';
import { useNavigate } from 'react-router-dom';
import { Skeleton } from 'antd';

const Recommendedsonglist = () => {
  const [data, setData] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    request
      .get(interfaceConfig.RecommendedSongList, {
        params: {
          limit: 15,
        },
      })
      .then((ret) => {
        if (ret.code === 200) {
          setData(ret.result);
        }
      });
  }, []);
  useEffect(() => {
    if (!_.isEmpty(data)) {
      imgLazy();
    }
  }, [data]);

  const handlerClick = (item) => {
    navigate('/DiscoverMusic/SongListDetail/' + item.id);
  };

  return (
    <div id="Recommendedsonglist">
      <h2>推荐歌单</h2>
      <div className="item_list">
        {_.map(data, (item, key) => {
          return (
            <div className="item" key={item.id}>
              <div className="img-wrap">
                {item.picUrl ? <img data-src={item.picUrl} alt="" /> : <Skeleton.Image className="skeleton-Image" />}
                <span className="iconfont icon-bofang1" onClick={() => handlerClick(item)}></span>
              </div>
              <Skeleton paragraph={false} loading={!item.name}>
                <p style={{ fontSize: 14 }}>{item.name}</p>
              </Skeleton>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Recommendedsonglist;
